<!--
 * @description 云展馆(固定数量)
 * @author dumeng
 * @date 2022/11/28
 -->
<template>
  <section
    v-if="list.length !== 0"
    class="online-show-fixed-page"
    :style="{
      'margin-top': top,
      'margin-bottom': marginBottom,
      padding: `0 ${spacing}`,
    }"
  >

    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title="moduleName"
      :option="option"
      :hide-desc="option.isMore === '2'"
      :style="{
        'background-color': backgroundColor,
        'border-radius':
          radiusSize+ ' ' + radiusSize + ' 0 0'
      }"
    />
    <section
      class="online-show-container"
      :style="{
        'border-radius':
          !isShowModuleName && option.isMore === '2' ? radiusSize : '0 0 '+ radiusSize+ ' ' + radiusSize
      }"
    >
      <ul class="pavilion-page-list">
        <li v-for="(item, index) in list" :key="index">
          <newsListStyleThree
            v-if="item.showType == 'ZSXS_YWZTYS'"
            :item="item"
            :label-obj="labelObj"
          />
          <!-- 大图 -->
          <newsListStyleSix v-else-if="item.showType == 'ZSXS_TWHPBTYS'" :item="item" :label-obj="labelObj" />
          <newsListStyleOne v-else :item="item" :label-obj="labelObj" />
        </li>
      </ul>
    </section>
  </section>
</template>

<script>
import mixins from './../mixins'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'

import newsListStyleOne from '../news/newsListStyleOne'
import newsListStyleThree from '../news/newsListStyleThree'
import newsListStyleSix from '../news/newsListStyleSix'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'

export default {
  name: 'OnlineShowFixed',
  components: {
    CellTitle,
    LabelComp,
    newsListStyleOne,
    newsListStyleThree,
    newsListStyleSix
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: () => {
      }
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      nextUrl: '',
      firstObj: {},
      list: [],
      labelObj: undefined
    }
  },
  async created() {
    if (this.isInitData) {
      this.labelObj = await this.getLabelList()
      this.initData()
    } else {
      this.list = [
        {
          mainTitle: '云展馆名称',
          publishTime: '2022/3/10',
          url: 'http://beyond.3dnest.cn/play/?m=012d102a_qQiT_b6f9_2Ts',
          tag: 'VR展厅',
          type: '1',
          showType: '2',
          imgUrl:
              'https://jnqg-prod.oss-cn-beijing.aliyuncs.com/2e87a99e-bf00-4418-95c3-87ab99e8173d/22/04/07/2204077c65d599f10b499fbc7b3506ae21e804.jpg'
        },
        {
          mainTitle: '云展馆名称',
          publishTime: '2022/3/10',
          url: 'https://cscec.chineseworkers.com.cn/#/broadcast/detail?i=bde4b4ed-9524-4306-a412-716015f80237&viewType=exhibitionCenter',
          tag: '视频展播',
          type: '2',
          showType: '2',
          imgUrl:
              'https://jnqg-prod.oss-cn-beijing.aliyuncs.com/2e87a99e-bf00-4418-95c3-87ab99e8173d/22/04/09/22040997b3c80363984b559584311ce66bf88f.jpg'
        }
      ]
    }
  },
  methods: {
    setData(result) {
      let rows = []
      if (Object.prototype.toString.call(result.onlineShowFixed?.data) === '[object Array]') {
        rows = result.onlineShowFixed?.data || []
      } else {
        rows = result.onlineShowFixed?.data.rows || []
      }

      this.setLabel(Object.assign([], rows), 'list')
    }
  }
}
</script>

<style lang="scss">
@import "@/styles/utility/rem.scss";

.online-show-fixed-page {
  position: relative;

  .online-show-container {
    background-color: #fff;

    .pavilion-page-list {

      > li {
        position: relative;

        > section {
          margin: 0;
        }

        &:after {
          left: rem(20);
          right: rem(20);
          width: auto;
          height: 1px;
          position: absolute;
          z-index: 0;
          bottom: 0;
          content: '';
          background-image: -webkit-linear-gradient(
                  bottom,
                  #ececec 50%,
                  transparent 0
          );
          background-image: linear-gradient(0deg, #ececec 50%, transparent 0);
        }

        &:last-child:after {
          display: none;
        }
      }
    }
  }
}
</style>
